<template>
  <div id="app">
    <main>
      <section>


        <!-- 视频学习内容 -->
        <section>
          <h2>视频学习</h2>
          <ul class="card-list">
            <li class="card" v-for="(course, index) in videoCourses" :key="index">
              <router-link :to="{ name: 'subjectVideo', params: { id: course.id } }">
                <img class="card-img" :src="course.categoryImg" alt="课程封面">
                <p class="card-title">{{ course.categoryName }}</p>
              </router-link>
            </li>
          </ul>
        </section>
      </section>
    </main>
  </div>
</template>


<script>
import {Message} from "element-ui";

export default {
  data() {
    return {
      currentSlide: 0,
      images: [
        "https://th.bing.com/th/id/R.1ee66f2404f9c630385c5074c89d98f8?rik=Wh8GGcRmOHqtzg&riu=http%3a%2f%2fcdn.tmooc.cn%2fbsfile%2fcourseImg%2f76FF4FBDD8F24DB1814A439D490C1712.png&ehk=pKOl%2bWX1wHnDD3S4no%2bY6KAtDh3nviv1bgDatZarJrQ%3d&risl=&pid=ImgRaw&r=0",
        "https://bpic.588ku.com/templet_pic/21/08/17/f7d4601a643d4f70ee836886058cbd31.jpg!/fw/750/quality/90/unsharp/true/compress/true",
        "https://bpic.588ku.com/templet_pic/21/08/17/26765ff028bdbc6de1cba6b0f1ff791b.jpg!/fw/750/quality/90/unsharp/true/compress/true"
      ],
      videoCourses: ["Java 基础入门", "Web 开发实战", "算法与数据结构", "数据库设计与优化"]
    };
  },
  mounted() {
    setInterval(this.nextSlide, 3000); // 自动轮播，每 3 秒切换
    this.getVideoCourses()
  },
  methods: {
    // 获取所有分类课程渲染
    getVideoCourses() {
      this.request.get('/subjectCategory/all').then(res => {
        if (res.code === '200') {
          this.videoCourses = res.data
        } else {
          this.messageError("获取视频学习分类失败")
        }
      }).catch(error => {
        Message.error("获取视频学习分类失败")
      })
    },

    nextSlide() {
      this.currentSlide = (this.currentSlide + 1) % this.images.length;
    },
    prevSlide() {
      this.currentSlide = (this.currentSlide - 1 + this.images.length) % this.images.length;
    }
  },

};
</script>




<style>
/* 全局样式 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-y: auto; /* 确保页面可以滚动 */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f9fafb;
  color: #333;
}

/* 页面容器样式 */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 主要内容样式 */
main {
  padding: 20px;
}

/* 轮播图样式 */
.carousel {
  position: relative;
  width: 70%; /* 调整轮播图宽度为页面宽度的 70% */
  max-width: 800px; /* 设置最大宽度，避免在大屏上太宽 */
  height: 300px; /* 固定高度为 300px */
  margin: 20px auto; /* 居中显示 */
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.carousel-slide {
  display: none;
  width: 100%;
  transition: opacity 0.5s ease-in-out;
}

.carousel-slide.active {
  display: block;
  opacity: 1;
}

.carousel img {
  width: 100%; /* 图片宽度自动适应容器 */
  height: 100%; /* 图片高度自动适应容器 */
  object-fit: cover; /* 确保图片内容按比例填充 */
}

.carousel button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  font-size: 2rem;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
}

.carousel.prev {
  left: 10px;
}

.carousel.next {
  right: 10px;
}

/* 视频学习、讨论区、赛事通知区样式 */
.section {
  margin: 30px 0;
  text-align: center;
}

.card-list {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5,1fr);
  grid-align-items: start;
  gap: 35px;
  list-style: none;
  padding: 0;
}

.card {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-in-out;
  width: 220px;
  text-align: center;
}

.card:hover {
  transform: translateY(-5px);
}

.card-img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.card-title {
  padding: 10px;
  font-size: 1rem;
  font-weight: bold;
  color: #007bff;
}

.btn {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border-radius: 5px;
  text-decoration: none;
  font-size: 1rem;
  transition: background-color 0.3s;
}

.btn:hover {
  background-color: #0056b3;
}

/* 响应式样式 */
@media (max-width: 768px) {
  .carousel {
    width: 90%;
  }

  .card-list {
    flex-direction: column;
    align-items: center;
  }

  .card {
    width: 80%;
    margin-bottom: 20px;
  }

  .carousel button {
    font-size: 1.5rem;
    padding: 8px;
  }
}
</style>